import { reactive } from "vue";


export interface BoundingRect {
	navbarStyle : {
		position : string;
		height : string;
		paddingTop : string;
		paddingLeft : string;
		paddingRight : string;
	},
	navbarHeaderStyle : {
		height : string;
	},
	windowBottom : number;
	safeArea : {
		topHeight : number; // 84（不带px）
		top : string; // 84px 带px
		height : number;// 84 （不带px）
		bottom : string; // 34px
		bottomHeight : number;// 34
	},
	window : {
		width : number; // 375
		height : number; // 730
	}
}

export function useBoundingRect(option = { position: 'static', back: true }) {
	const navbarStyle = {
		position: option.position,
		height: '44px', // 胶囊按钮+顶部状态栏（显示时间、信号、电池的区域）
		paddingTop: '0px', // 胶囊按钮距离顶部的高度
		paddingLeft: `0px`,
		paddingRight: `${option.back ? 82 : 0}rpx`
	};
	const navbarHeaderStyle = {
		height: '44px',
	};

	const systemInfo = uni.getSystemInfoSync();
	if (systemInfo.safeAreaInsets?.top) {
		navbarStyle.paddingTop = `${systemInfo.safeAreaInsets.top}px`;
	}

	// #ifdef MP-WEIXIN
	// 只处理手机端，PC打开微信小程序没有状态栏
	if (['ios', 'android', 'devtools'].includes(systemInfo.platform)) {
		const menuRect = uni.getMenuButtonBoundingClientRect();
		console.log(menuRect);
		console.log(systemInfo);
		
		const diff = menuRect.top - (systemInfo.safeAreaInsets?.top || 0);
		navbarStyle.height = `${menuRect.height + menuRect.top + diff}px`;
		navbarHeaderStyle.height = `${menuRect.height}px`;
		navbarStyle.paddingTop = `${menuRect.top - diff}px`;
		navbarStyle.paddingRight = `${systemInfo.windowWidth - menuRect.right + menuRect.width + 10}px`;
	}
	// #endif
	const reuslt = reactive<BoundingRect>(
		{
			navbarStyle,
			navbarHeaderStyle,
			windowBottom: systemInfo.windowBottom,
			safeArea: {
				topHeight: parseFloat(navbarStyle.height), // 84（不带px）
				top: navbarStyle.height, // 84px 带px
				height: parseFloat(navbarStyle.height), // 84 （不带px）
				bottom: `${(systemInfo.safeAreaInsets?.bottom || 0)}px`, // 34px
				bottomHeight: systemInfo.safeAreaInsets?.bottom || 0 // 34
			},
			window: {
				width: systemInfo.windowWidth, // 375
				height: systemInfo.windowHeight // 730
			}
		});
	return reuslt;
}